<template>
  <div class="bk-c-w item-ct">
    <div class="flex">
      <div class="content-ct">
        <div class="flex jc-sb font-line">
          <div>订单编号：{{orderItem.orderNo}}</div>
        </div>
        <div class="flex jc-sb font-line">
          <div>下单时间：{{orderItem.createTime}}</div>
        </div>
        <div class="flex jc-sb font-line">
          <div>参保人：{{orderItem.userName}}</div>
          <div>参保地点：{{orderItem.businessCity}}{{orderItem.businessTown}}</div>
        </div>
      </div>
      <div class="flex-c img-ct">
        <img src="/static/images/del.png" class="del-img" @click="delOrderById(orderItem.id)">
      </div>
    </div>
    <div class="f-39 c-outer middle-ct">
      <div class="content-ct">
        <div class="flex jc-sb font-line">
          <div>社会保险
            <span class="c-c-1">( 基数：{{orderItem.sbBaseMoney}}元 )</span>
          </div>
          <div></div>
        </div>
        <div class="flex jc-sb font-line">
          <div>缴纳时间：{{orderItem.sbBeginMonth}}~{{orderItem.sbEndMonth}}</div>
          <div>金额：{{orderItem.sbTotalMoney}}元</div>
        </div>
      </div>
      <div class="content-ct">
        <div class="flex jc-sb font-line">
          <div>公 积 金
            <span class="c-c-1">( 基数：{{orderItem.gjjBaseMoney}}元 )</span>
          </div>
          <div></div>
        </div>
        <div class="flex jc-sb font-line">
          <div>缴纳时间：{{orderItem.gjjBeginMonth}}~{{orderItem.gjjEndMonth}}</div>
          <div>金额：{{orderItem.gjjTotalMoney}}元</div>
        </div>
      </div>
      <div class="content-ct">
        <div class="flex jc-sb font-line">
          <div>代发工资
            <span class="c-c-1">( 基数：{{orderItem.gzBaseMoney}}元 )</span>
          </div>
          <div></div>
        </div>
        <div class="flex jc-sb font-line">
          <div>缴纳时间：{{orderItem.gzBeginMonth}}~{{orderItem.gzBeginMonth}}</div>
          <div>金额：{{orderItem.gzTotalMoney}}元</div>
        </div>
      </div>
    </div>
    <div class="jc-sb btn-ct">
      <div class="content-ct">
        <div class="flex jc-sb font-line">
          <div></div>
          <div>优惠金额：{{orderItem.discountMoney}}元</div>
        </div>
        <div class="flex jc-sb font-line">
          <div></div>
          <div>账户金额：2329元</div>
        </div>
        <div class="flex jc-sb font-line">
          <div></div>
          <div class="c-c-1">总金额：{{orderItem.totalMoney}}元</div>
        </div>
        <div class="flex jc-sb font-line">
          <div></div>
          <div v-if="orderItem.orderStatus===0">
            <div class="cm-btn pay-btn">去支付</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {delOrderById} from '@/service'
export default {
  data () {
    return {
      aInnerList: [] // 内部图片列表
    }
  },
  props: ['orderItem', 'isPay'],
  mounted: function () {},
  filters: {
    // 0:待支付(用户可删除) 1:审核中2:已支付 3:已取消
    orderStatusFilter (input = 0) {
      let aType = ['待支付', '审核中', '已支付', '已取消']
      return aType[input]
    }
  },
  computed: {},
  methods: {
    async handleDel (orderId) {
      let oParams = {
        orderId: orderId
      }
      let {result} = await delOrderById(oParams)
      if (result !== 1) {
        this.$vux.toast.show({
          type: 'cancel',
          text: '删除失败'
        })
        return false
      }
      this.$vux.toast.show({
        type: 'success',
        text: '删除成功'
      })
      this.$emit('delSuccess')
    },
    // 删除订单
    async delOrderById (orderId) {
      let _This = this
      this.$vux.confirm.show({
        title: '确认要删除订单吗？',
        onCancel () {
        },
        onConfirm () {
          _This.handleDel(orderId)
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
@import "@/style/mixin";
.item-ct {
  padding: cmSize(30) cmSize(50);
  margin-top: cmSize(40);
}

.font-line {
  height: cmSize(100);
  line-height: cmSize(100);
}
.middle-ct {
  padding: cmSize(30) 0;
}
.c-outer {
  border-top: 1px solid #9b9b9b;
  border-bottom: 1px solid #9b9b9b;
}
.content-ct {
  flex: 1 1 3rem;
}
.img-ct {
  flex: 0 0 cmSize(120);
  .del-img {
    width: cmSize(60);
    height: cmSize(60);
  }
}
.btn-ct {
  padding-top: cmSize(20);
}
.login-ct {
  padding: cmSize(80) cmSize(40);
}
.pay-btn {
  width: cmSize(260);
  height: cmSize(110);
  line-height: cmSize(110);
}
.protel-ct {
  padding: 0 cmSize(40);
}
</style>
